<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            height: 200px;
            width: 200px;
            background-color: red;
            /* display: inline-block; */
        }
    </style>
    <script src="./js/jquery-3.3.1.min.js"></script>
<script>
    $(function(){
        //行内样式 display
        //隐藏 display:none  显示 display:原始值   如果没有原始值，则删除display样式
        //动画路线 左上角<->右下角
$(".show").click(function(){
    //$("div").show()
    //$("div").show("slow")  normal fast
    $("div").show(1000)
})
$(".hide").click(function(){
    $("div").hide()
})
$(".toggle").click(function(){
    $("div").toggle()
})

//行内样式 height
//动画路线 上<->下
$(".slideDown").click(function(){
    
    $("div").slideDown(3000)
})
$(".slideUp").click(function(){
    $("div").slideUp()
})
$(".slideToggle").click(function(){
    //$("div").stop().slideToggle(3000) 删除所有动画队列,在最后一次动画基础上，继续新动画
    //$("div").finish().slideToggle(3000)  删除所有排队的动画,完成所有动画，开始新动画
})

//行内样式 opacity 0<->1

$(".fadeIn").click(function(){
    
    $("div").fadeIn()
})
$(".fadeOut").click(function(){
    $("div").fadeOut(3000)
})
$(".fadeToggle").click(function(){
    $("div").fadeToggle()
})
$(".fadeTo").click(function(){
    $("div").fadeTo("normal",0.3)
})
$(".animate").click(function(){
    //$("div").animate({width:"400px"},1000)
    //$("div").animate({width:"400px",height:"400px",opacity:0.3},1000)
    $("div").animate({width:'+=40px',height:"+=40px",opacity:0.3},1000)
})


    })
</script>

</head>
<body>
    <button class="show">show</button>
    <button class="hide">hide</button>
    <button class="toggle">toggle</button>
    <br>
    <button class="slideDown">slideDown</button>
    <button class="slideUp">slideUp</button>
    <button class="slideToggle">slideToggle</button>
    <br>
    <button class="fadeIn">fadeIn</button>
    <button class="fadeOut">fadeOut</button>
    <button class="fadeToggle">fadeToggle</button>
    <button class="fadeTo">fadeTo(0.3)</button>
    <br>
   <button class="animate">animate</button>
    <div></div>
</body>
</html>